<template>
	<view>
		
		<!-- 介绍 -->
		<view class="title">
			<text>该示例可解决列表长按事件与点击事件冲突问题，并且滑动时不会触发长按事件，且容器内可以再套一个点击事件。</text>
			<text>【网上大部分方法滑动时都会触发长按事件，且再多一个点击事件是无法实现的】</text>
		</view>
		<!-- END -->
		
		
		<!-- 列表 -->
		<view
		v-for="(item, index) in 12"
		:key="index"
		@touchstart="LongPress()"
		@touchend="onClick()"
		@touchmove="tomove()"
		class="list-content">
			<button @touchstart="btnClick()">{{ index }}</button>
		</view>
		<!-- END -->
		
	</view>
</template>

<script>
export default {
	
	data() {
		return {
			timer: 0,//长按标识
			isMove: false,//滑动标识
			isEnd: false,//手指抬起标识
			isLong: false,//解决长按进入问题
			isClick: false,//点击标识
		}
	},
	
	methods:{
		
		/*
		 * 长按触发
		 * @return void
		 */
		LongPress: function()
		{
			this.isEnd = false
			if(!this.isMove){
				this.timer = setTimeout(() => {
					this.timer = 0
					if(!this.isMove && !this.isEnd)
					{ 
						// 【这里写长按事件】
						uni.showToast({
						    title: '长按',
						    icon: 'none'
						})
						
						
						
						this.isLong = true
					}
					
					else
					{
						this.isLong = false
					}
				}, 1000)//长按多少秒触发
			}
		},
		
		
		/*
		 * 点击触发
		 * @return void
		 */
		onClick: function()
		{
			if(!this.isMove){
				clearTimeout(this.timer)
				if(this.timer != 0){
					if(this.isClick == false){
						
						// 【这里写点击事件】
						uni.showToast({
						    title: '点击',
						    icon: 'none'
						})
						
					}
				}
			}
			this.isMove = false
			this.isEnd = true
			this.isLong = false
		},
		
		
		/*
		 * 点击触发-按钮
		 * @return void
		 */
		btnClick: function()
		{
			this.isClick = true
			if(this.isClick == true){
				
				// 【这里写点击按钮事件】
				uni.showToast({
				    title: '按钮被点击',
				    icon: 'none'
				})
				
			}
			
			setTimeout(() => {
				this.isClick = false
			}, 200)
		},
		
		
		/*
		 * 手指滑动时触发
		 * 这里不用管
		 * return void
		 */
		tomove: function()
		{
			this.isMove = true
		}
		
	}
	
}
</script>

<style>
/* 列表 */
.list-content{
	background: #007AFF;
	width: 90%;
	margin: 100rpx 0 -70rpx 5%;
	border-radius: 10rpx;
	padding-top: 40rpx;
	padding-bottom: 40rpx;
}
button{
	width: 200rpx;
	background: #ffffff;
}
/* END */
</style>